import React from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { HomeOutlined, FireOutlined, MessageOutlined, EditOutlined, UserOutlined } from '@ant-design/icons'
import './style.css'

interface BottomNavigationProps {
  activeKey?: string
}

const BottomNavigation: React.FC<BottomNavigationProps> = ({ activeKey }) => {
  const navigate = useNavigate()
  const location = useLocation()

  const items = [
    { key: 'dashboard', icon: <HomeOutlined />, label: '首页', path: '/dashboard' },
    { key: 'hot-radar', icon: <FireOutlined />, label: '热点', path: '/hot-radar' },
    { key: 'conversation', icon: <MessageOutlined />, label: 'AI对话', path: '/conversation' },
    { key: 'editor', icon: <EditOutlined />, label: '创作', path: '/editor' },
    { key: 'profile', icon: <UserOutlined />, label: '我的', path: '/profile' }
  ]

  const currentKey = activeKey || items.find((item) => location.pathname.startsWith(item.path))?.key || 'dashboard'

  return (
    <div className="bottom-navigation">
      {items.map((item) => (
        <div
          key={item.key}
          className={`nav-item ${currentKey === item.key ? 'active' : ''}`}
          onClick={() => navigate(item.path)}
        >
          <span className="nav-icon" style={{ fontSize: '22px' }}>
            {item.icon}
          </span>
          <span className="nav-label">{item.label}</span>
        </div>
      ))}
    </div>
  )
}

export default BottomNavigation
